<template>
  <!-- 项目穿透G6图 -->
  <div v-loading="loading" style="height: 100%;" class="list-table">
    <div style="width: 50vh;position: absolute;z-index: 2001;">
      <div class="mb5" style="display: flex;align-items: center;">
        <div class="tit">{{ $t('查询维度') }}:</div>
        <el-select
          v-model="businessType"
          :placeholder="$t('请选择')"
          filterable
          clearable
        >
          <el-option :label="$t('项目')" :value="'deal'" />
          <el-option :label="$t('标的公司')" :value="'company'" />
        </el-select>
      </div>
      <div v-if="businessType === 'deal'" class="mb5">
        <div style="display: flex;align-items: center;">
          <div class="tit">{{ $t('项目名称') }}:</div>
          <MainBodySelect
            v-model="dealId"
            parameters="deal"
            :clearable="false"
            @change="getDeal"
          />
        </div>
      </div>
      <div v-if="businessType === 'company'" class="mb5">
        <div style="display: flex;align-items: center;">
          <div class="tit">{{ $t('标的公司') }}:</div>
          <el-select
            v-model="companyId"
            :placeholder="$t('请选择')"
            filterable
            clearable
            @change="getCompany"
          >
            <el-option
              v-for="dict in companyPortalFileOption"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </div>

      </div>
    </div>
    <force v-if="!loading" ref="force" :charts-data="echartsData" />
  </div>
</template>

<script>
import MainBodySelect from '@/components/MainBodySelect/index'
import force from '@/views/chart/force.vue'
import { listDealTypeCompanySelect } from '@/api/company/base/companyBase'
import { getProjectPenetration } from '@/api/bf/investmentPenetration/investmentPenetration'
export default {
  components: {
    force,
    MainBodySelect
  },
  data() {
    return {
      businessType: 'deal',
      companyId: undefined,
      companyPortalFileOption: [],
      dealId: undefined,
      loading: false,
      echartsData: undefined,
      rootId: undefined
    }
  },
  watch: {
    businessType: {
      handler() {
        this.dealId = undefined
        this.companyId = undefined
      },
      immediate: true
    }
  },
  created() {
    listDealTypeCompanySelect({}).then(response => {
      response.rows.forEach(item => {
         this.companyPortalFileOption.push({ dictLabel: item.companyName, dictValue: item.id })
      })
    })
  },
  methods: {
    getDeal() {
      this.companyId = undefined
      if (this.dealId === undefined || this.dealId === null || this.dealId === '') {
        return
      }
      this.getEchartsData('deal', this.dealId)
    },
    getCompany() {
      this.dealId = undefined
      if (this.companyId === undefined || this.companyId === null || this.companyId === '') {
        return
      }
      const find = this.companyPortalFileOption.find(obj => obj.dictValue === this.companyId)
      this.getEchartsData('company', this.companyId, find.dictLabel)
    },
    getEchartsData(type, businessId, businessName) {
      this.loading = true
      getProjectPenetration({ businessType: type, businessId: businessId, businessName: businessName }).then(response => {
        this.loading = false
        this.$nextTick(() => {
          this.echartsData = response.data
          if (this.echartsData !== null) {
            this.rootId = this.echartsData.nodes[0].id
          }
          console.log(response.data)
        })
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.tit{
  font-size: 13px;
  margin-right: 5px;
}
</style>
